<template>
  <div>
    <div class="head">
      <div class="headbox">
        <div class="head-txt">日销售统计</div>
        <div class="head-flex">
          <div>
            <div class="flex-txt">{{ salesStati }}</div>
            <div class="flex-txt2">当日销售量（个）</div>
          </div>
          <div>
            <div class="flex-txt">{{ salesyuan }}</div>
            <div class="flex-txt2">当日销售额（元）</div>
          </div>
          <div>
            <div class="flex-txt">{{ dividedOnThe }}</div>
            <div class="flex-txt2">当日分成（元）</div>
          </div>
        </div>
      </div>
      <div class="headbox2">
        <div class="head-txt">月销售统计</div>
        <div class="head-flex">
          <div>
            <div class="flex-txt">{{ sales }}</div>
            <div class="flex-txt2">当月销售量（个）</div>
          </div>
          <div>
            <div class="flex-txt">{{ shouru }}</div>
            <div class="flex-txt2">当月销售额（万元）</div>
          </div>
          <div>
            <div class="flex-txt">{{ yuan }}</div>
            <div class="flex-txt2">当月分成（元）</div>
          </div>
        </div>
      </div>

    </div>
    <el-card shadow="never" class="card">
      <el-form ref="ruleForm" :inline="true" :model="statistics" class="demo-form-inline">
        <el-form-item label="合作商：">
          <el-select v-model="statistics.partnerId" placeholder="活动区域" @input="selectChange">
            <el-option v-for="item in partners" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="text">
        <div>笔数统计：  <span>{{ res }}</span> &nbsp;&nbsp;  个</div>
        <div>收入统计：  <span>{{ (res2 / 100).toFixed(2) }}</span>&nbsp;&nbsp;   元</div>
        <div>分成统计：  <span>{{ (res3 / 100).toFixed(2) }}</span>&nbsp;&nbsp;   元</div>
      </div>
      <el-table
        :data="queryList"
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="订单日期"
        />
        <el-table-column
          prop="ownerName"
          label="合作商"
        />
        <el-table-column
          prop="fencheng"
          label="分成比例"
        />
        <el-table-column
          prop="jiage"
          label="收入（元）"
        />
        <el-table-column
          prop="orderCount"
          label="笔数"
        />
        <el-table-column
          prop="fencheng2"
          label="分成金额（元）"
        />
      </el-table>
      <el-pagination
        :current-page="page.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { salesStatistics, salesyuanAPI, dividedOnTheDayAPI, salesAPI, revenueAPI, divideIntoAPI, constpartnersAPI, numberOfCounts, incomeStatistics, splitIntoStatistics, principalAPI } from '@/api//other.js'
export default {
  data() {
    return {
      // 日销售
      salesStati: '',
      salesyuan: '',
      dividedOnThe: '',
      // 月销售
      sales: '',
      shouru: '',
      yuan: '',
      // 合作商
      value1: [],
      formInline: { },
      page: {
        pageIndex: 1,
        pageSize: 10,
        partnerName: '',
        start: '',
        end: ''
      },
      totalCount: null,
      queryList: [],
      partners: [],
      qian: '',
      // 统计（个）
      statistics: {
        partnerId: '',
        start: '',
        end: ''
      },
      res: '',
      res2: '',
      res3: ''
    }
  },
  async created() {
    this.value1 = [
      `${dayjs(new Date().valueOf()).format('YYYY-MM')}-01`, `${dayjs(new Date().valueOf()).format('YYYY-MM-DD')}`
    ]
    this.res = await numberOfCounts({ start: `${dayjs(new Date().valueOf()).format('YYYY-MM')}-01 00:00:00`, end: `${dayjs(new Date().valueOf()).format('YYYY-MM-DD')} 23:59:59` })
    this.res2 = await incomeStatistics({ start: `${dayjs(new Date().valueOf()).format('YYYY-MM')}-01 00:00:00`, end: `${dayjs(new Date().valueOf()).format('YYYY-MM-DD')} 23:59:59` })
    this.res3 = await splitIntoStatistics({ start: `${dayjs(new Date().valueOf()).format('YYYY-MM')}-01 00:00:00`, end: `${dayjs(new Date().valueOf()).format('YYYY-MM-DD')} 23:59:59` })
    this.page.start = this.value1[0]
    this.page.end = this.value1[1]
    this.page.partnerId = this.statistics.partnerId
    // 日销售统计
    this.getsalesStatistics()
    // 月销售
    this.getyueList()
    // 合作商
    this.getpartners()
    // 主体数据
    this.getprincipalAPI()
  },
  methods: {
    // 日销售统计
    async  getsalesStatistics() {
      this.salesStati = await salesStatistics()
      this.salesyuan = await salesyuanAPI()
      this.dividedOnThe = await dividedOnTheDayAPI()
    },
    // 月销售
    async getyueList() {
      this.sales = await salesAPI()
      const res = await revenueAPI()
      const prve = await divideIntoAPI()
      this.shouru = (res / 1000000).toFixed(2)
      this.qian = (res / 100).toFixed(2)
      this.yuan = (prve / 100).toFixed(2)
    },
    // 合作商筛选
    async getpartners() {
      const res = await constpartnersAPI()
      this.partners = res.currentPageRecords
      // console.log(this.partners)
    },
    // 查询
    async  inquire() {
      this.statistics.start = `${dayjs(this.value1[0]).format('YYYY-MM-DD')} 00:00:00`
      this.statistics.end = `${dayjs(this.value1[1]).format('YYYY-MM-DD')} 23:59:59`
      this.page.start = `${dayjs(this.value1[0]).format('YYYY-MM-DD')}`
      this.page.end = `${dayjs(this.value1[1]).format('YYYY-MM-DD')}`
      this.page.partnerId = this.statistics.partnerId
      this.res = await numberOfCounts(this.statistics)
      this.res2 = await incomeStatistics(this.statistics)
      this.res3 = await splitIntoStatistics(this.statistics)
      this.getprincipalAPI()
      console.log(this.$refs.ruleForm)
      // console.log(this.page)
    },
    // 主体数据
    async getprincipalAPI() {
      const res = await principalAPI(this.page)
      this.totalCount = res.totalCount - 0
      this.queryList = res.currentPageRecords
      this.queryList.forEach(item => {
        item.fencheng = `${item.ratio}%`
        item.fencheng2 = `+${(item.totalBill / 100).toFixed(2)}`
        item.jiage = `+${(item.orderTotalMoney / 100).toFixed(2)}`
      })
    },
    // 分页
    handleSizeChange(newSize) {
      this.page.pageSize = newSize
      this.getprincipalAPI()
    },
    handleCurrentChange(newNum) {
      this.page.pageIndex = newNum
      this.getprincipalAPI()
    },
    selectChange(val) {
      this.partners.forEach(item => {
        if (item.id === val) {
          this.page.partnerName = item.name
        }
      })
      console.log(this.page.partnerName)
    }
  }
}
</script>

<style lang="scss" scoped>
.head{
  overflow: hidden;
  // margin-bottom: 20px;
  .headbox{
    padding: 20px;
    overflow: hidden;
  float: left;
  margin-bottom: 20px;
  background-color: rgb(233, 243, 255);
    background-image: url(), url();
    background-repeat: no-repeat, no-repeat;
    background-position: 0px 0px, calc(100% - 12px) 100%;
  height: 240px;
  width: 785px;
  border-radius: 20px;
  .head-txt{
    font-weight: 600;
    margin-bottom: 60px;
  }
  .head-flex{
    // line-height: 180px;
    display: flex;
    justify-content: space-evenly;
    .flex-txt{
      text-shadow: rgb(85 132 255 / 50%) 2px 4px 7px;
      color: rgb(7, 32, 116);
      font-size: 36px;
    font-family: PingFangSC-Semibold, "PingFang SC";
    font-weight: 600;
    }
    .flex-txt2{
      color: rgb(145, 167, 220);
      font-size: 12px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-weight: 400;
    margin-top: 6px;

    }
}
}

.headbox2{
  margin-bottom: 20px;
  padding: 20px;
  overflow: hidden;
  float: right;
  height: 240px;
  width: 785px;
  border-radius: 20px;
  background: url(http://likede2-admin.itheima.net/img/operation.4120cc58.png) calc(100% - 12px) 100% no-repeat rgb(251, 239, 232);
  .head-txt{
    font-weight: 600;
    margin-bottom: 60px;
  }
  .head-flex{
    // line-height: 180px;
    display: flex;
    justify-content: space-evenly;
    .flex-txt{
      text-shadow: rgb(255 99 85 / 50%) 2px 4px 7px;
      color: rgb(255, 87, 87);
      font-size: 36px;
    font-family: PingFangSC-Semibold, "PingFang SC";
    font-weight: 600;
    }
    .flex-txt2{
      color: rgb(222, 150, 144);
      font-size: 12px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-weight: 400;
    margin-top: 6px;

    }
}
}
}
.text{
  font-size: 14px;
  margin-bottom: 35px;
  div{
    float: left;
    margin-right: 40px;
  }
  span{
    font-size: 16px;
    font-size: 20px;
    color: #ff5757;
    font-weight: 500;
    margin-right: 10px;
  }
}
</style>
